<!DOCTYPE html>
<!-- 通过引入该命名空间就可以在HTML文件中使用Thymeleaf标签语言，用关键字“th”来标注。-->
<!--https://www.meishichina.com/-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>首页</title>
    <th:block th:include="common/header :: header"/>
    <style>
        .carousel-caption {
            bottom: 3rem;
            z-index: 10;
        }
        .carousel-item {
            height: 32rem;
        }
        .carousel-item > img {
            position: absolute;
            top: 0;
            left: 0;
            min-width: 100%;
            height: 32rem;
        }
    </style>
</head>
<body>
<th:block th:include="common/navbar :: navbar"/>
<th:block th:include="common/banner :: banner"/>
<div class="py-5 bg-light">
    <div class="container-fluid pl-5 px-5">
        <div class="row">
            <div class="col-md-3 col-sm-4 col-lg-3 col-xl-2" th:each="menu:${menus}">
                <div class="card mb-2 shadow-sm">
                    <img th:src="@{${menu.image}}" style="width: 100%; height: 160px;">
                    <div class="card-body">
                        <p class="card-text">[[${menu.name}]]</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm btn-outline-success" th:onclick="addCart([[${menu.id}]],[[${menu.name}]], [[${menu.price}]], [[${menu.image}]])">下单</button>
                            </div>
                            <small class="text-danger">￥[[${menu.price}]]</small>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<th:block th:replace="common/pagenation :: pagination('/index', ${menus.getPageable().getPageNumber()}, ${menus.totalPages}, ${menus.getPageable().getPageSize()})"/>
<th:block th:include="common/scripts :: scripts"/>
<script type="text/javascript" th:src="@{/static/js/cart.min.js}"></script>
<script type="text/javascript">
    addCart = (productId, title, price, image) => {
        shoppingCart.add({ productId, title, price, image})
        console.log(shoppingCart.list())
        toastr.success('您可前往购物车结算或继续下单', '加入购物车成功！')
    }
</script>
</body>
</html>